@import "../common/var.scss";
@import "../common/mixin.scss";
// 商品详情头部
.product-topNav {
    height: r(143);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    z-index: 1000;
    left: 0;
    top: 0;
    .title-items {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid $border-gary;
        z-index: -1;
        .item {
            margin-right: r(65);
            position: relative;
            display: flex;
            align-content: center;
            height: 100%;
            display: flex;
            align-items: center;
            &:last-child {
                margin-right: 0;
            }
            a {
                color: $fc-title-gary;
                font-size: r(56);
                display: block;
            }
            &.cur {
                a {
                    color: $fc-red;
                }
                &:after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: r(6);
                    background-color: $bg-red;
                    display: block;
                }
            }
        }
    }
    .icon-wrap {
        display: flex;
        .msg {
            position: relative;
            b {
                display: block;
                position: absolute;
                right: r(-10);
                top: r(-10);
                width: r(36);
                height: r(36);
                border-radius: 50%;
                background-color: $bg-red;
                color: $fc-white;
                line-height: r(36);
                text-align: center;
                font-size: r(30);
                overflow: hidden;
            }
        }
    }
}

// 商品详情二级导航
.product-topNav-guide {
    padding-top: r(144);
    display: flex;
    height: r(138);
    .item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-right: 1px solid $border-gary;
        font-size: r(42);
        color: $fc-title-gary;
        &:last-child {
            border-right: 0;
        }
        &.cur {
            color: $fc-red;
        }
    }
}

// 商品详情轮播
.product-scroll {
    padding-top: r(144);
    .swiper-slide {
        height: r(1080);
        img {
            display: block;
            width: 100%;
        }
        video {
            width: 100%;
            display: block;
            object-fit: fill;
            height: 100%;
        }
    }
    .swiper-pagination-bullet {
        width: r(24);
        height: r(24);
        background: #000;
    }
    .swiper-pagination-bullet-active {
        background: #000;
        opacity: 1;
    }
    .swiper-pagination-bullets {
        bottom: r(36);
    }
}

// 商品信息&价格
.product-info-wrap {
    .tit {
        font-size: r(42);
        color: $fc-base;
        line-height: r(52);
        max-height: r(96);
        padding-top: r(39);
        font-weight: 600;
        overflow: hidden;
    }
    // 商品价格
    .price-wrap {
        display: flex;
        align-items: center;
        margin-top: r(30);
        .price {
            font-size: r(69);
            color: $fc-red;
            em {
                font-size: r(54);
                font-style: normal;
                display: inline-block;
            }
        }
        .tag {
            width: r(135);
            height: r(42);
            display: block;
            text-align: center;
            line-height: r(42);
            font-size: r(30);
            color: $fc-gary;
            background-color: $bg-gary;
            margin-left: r(30);
        }
    }
    // 商品原价
    .oldPrice-wrap {
        line-height: 1;
        margin-top: r(10);
        .oldPrice {
            font-size: r(36);
            color: $fc-gary;
            em {
                text-decoration: line-through;
                font-style: normal;
                margin-left: r(12);
            }
        }
    }
    // 商品其他信息
    .other-info {
        display: flex;
        justify-content: space-between;
        color: $fc-gary;
        font-size: r(36);
        line-height: 1;
        margin-top: r(30);
        padding-bottom: r(36);
        .kuaidi {
            em {
                font-style: normal;
            }
        }
    }
}

//福利
.welfare-wrap {
    margin-top: r(30);
    .content {
        border-bottom: r(2) solid $border-gary;
        height: r(138);
        display: flex;
        align-items: center;
        justify-content: space-between;
        &:last-child {
            border-bottom: 0;
        }
    }
    .ticket {
        display: flex;
        align-items: center;
        .name {
            font-size: r(42);
            color: $fc-base;
            margin-left: r(30);
            font-weight: normal;
        }
    }
    .detail {
        @extend .ticket;
        .tag {
            font-size: r(30);
            color: $fc-red;
            width: r(72);
            height: r(39);
            background-color: $bg-light-red;
            line-height: r(39);
            text-align: center;
        }
        .name {
            font-size: r(42);
            color: $fc-base;
            margin-left: r(30);
            font-weight: normal;
        }
    }
    .tags {
        @extend .ticket;
        span {
            font-size: r(42);
            color: $fc-title-gary;
            display: flex;
            align-items: center;
            margin-left: r(45);
            &:first-child {
                margin-left: 0;
                &:before {
                    display: none;
                }
            }
            &:before {
                content: "";
                width: r(12);
                height: r(12);
                border-radius: 50%;
                display: inline-block;
                background-color: #b5b6b5;
                margin-right: r(10);
            }
        }
    }
    .btn {
        width: r(116);
        height: r(56);
        appearance: none;
        border: r(2) solid #c6c3c6;
        border-radius: r(45);
        background-color: $bg-white;
        font-size: r(36);
        color: $fc-gary;
    }
}

// 尺寸颜色选择
.sel-wrap {
    @extend .welfare-wrap;
    .sel-style {
        .name {
            font-size: r(42);
            color: $fc-base;
            font-weight: normal;
        }
    }
}

// 用户评价
.comment-wrap {
    margin-top: r(30);
    .hd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: r(2) solid $border-gary;
        height: r(138);
        background: url(../../dist/img/go_arr.png) no-repeat center right/r(19) r(31);
        .tit {
            font-size: r(42);
            color: $fc-base;
            font-weight: 600;
        }
        .rate {
            color: $fc-base;
            font-weight: 600;
            margin-right: r(38);
            font-size: r(42);
            em {
                color: $fc-red;
                font-style: normal;
                margin-left: r(18);
            }
        }
    }
    .bd {
        .comment-section {
            border-bottom: 0;
            &:first-child {
                border-bottom: r(2) solid $border-gary;
            }
            .head {
                display: flex;
                height: r(138);
                align-items: center;
                justify-content: space-between;
            }
            .head-l {
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: r(78);
                    height: r(78);
                    display: block;
                    border-radius: 50%;
                }
                span {
                    font-size: r(36);
                    color: $fc-base;
                    margin-left: r(30);
                }
            }
            .head-r {
                .rating {
                    display: flex;
                    justify-content: space-around;
                    span {
                        margin-left: r(15);
                    }
                }
            }
            .con {
                .comment {
                    font-size: r(42);
                    color: $fc-base;
                    line-height: r(52);
                }
                .img {
                    margin-top: r(29);
                    margin-bottom: r(29);
                    display: flex;
                    align-items: center;
                    overflow-x: auto;
                    img {
                        width: r(162);
                        height: r(162);
                        margin-right: r(20);
                        flex-shrink: 0;
                    }
                }
                .info {
                    height: r(60);
                    padding-bottom: r(15);
                    font-size: r(36);
                    color: $fc-gary;
                    display: flex;
                    align-items: center;
                    .time {
                        margin-right: r(35);
                    }
                }
            }
        }
        .more {
            display: flex;
            justify-content: center;
            margin-top: r(60);
            padding-bottom: r(85);
            button {
                border: r(2) solid $border-red;
                appearance: none;
                border-radius: r(45);
                color: $fc-red;
                background-color: $bg-white;
                font-size: r(36);
                width: r(296);
                height: r(68);
            }
        }
    }
}

//商铺信息
.vendor-wrap {
    margin-top: r(30);
    padding-top: r(46);
    .hd {
        display: flex;
        margin-bottom: r(38);
        .img {
            width: r(144);
            height: r(144);
            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .tit {
            display: flex;
            flex-direction: column;
            margin-left: r(30);
            h1 {
                font-weight: 600;
                color: $fc-base;
                font-size: r(42);
                line-height: 1;
                padding-top: r(12);
                padding-bottom: r(45);
            }
            p {
                font-size: r(36);
                color: $fc-gary;
                line-height: 1;
                span {
                    color: $fc-red;
                }
            }
        }
    }
    .bd {
        .count {
            display: flex;
            justify-content: space-around;
            .item {
                display: flex;
                flex-direction: column;
                text-align: center;
                box-sizing: border-box;
                justify-content: space-around;
                width: r(340);
                margin: r(12) 0;
                height: r(122);
                flex: 1;
                &:nth-child(2) {
                    border-left: 1px solid $border-gary;
                }
                &>span {
                    color: $fc-base;
                    font-size: r(48);
                    font-weight: 600;
                    line-height: 1;
                    &:last-child {
                        font-weight: normal;
                        font-size: r(36);
                        color: $fc-gary;
                        // padding-top: r(15);
                    }
                }
            }
            .rating {
                width: 36%;
                padding-right: r(33);
                .sec {
                    font-size: r(36);
                    color: $fc-gary;
                    margin-bottom: r(22);
                    display: flex;
                    justify-content: flex-end;
                    text-align: right;
                    span {
                        width: r(100);
                        color: $fc-base;
                        font-weight: 600;
                    }
                    // &>span {
                    //   color: $fc-green;
                    //   &:first-child {
                    //     padding-left: r(15);
                    //   }
                    //   &.high {
                    //     color: $fc-red;
                    //   }
                    // }
                }
            }
        }
    }
}

// 为你推荐
.recommend-wrap {
    margin-top: r(30);
    .tit {
        font-size: r(42);
        color: $fc-base;
        font-weight: 600;
        height: r(122);
        line-height: r(122);
    }
    .bd {
        .recommend {
            padding-bottom: r(60);
        }
        .reco-list-wrap {
            display: flex;
            flex-wrap: wrap;
            width: r(1021);
            margin: 0 auto;
            .item {
                width: r(330);
                margin-right: r(15);
                box-sizing: border-box;
                &:nth-child(3n) {
                    margin-right: 0;
                }
            }
            .img {
                height: r(330);
                img {
                    display: block;
                    width: 100%;
                }
            }
            .title {
                font-size: r(36);
                color: $fc-title-gary;
                line-height: r(42);
                height: r(81);
                overflow: hidden;
                margin-top: r(12);
            }
            .price {
                font-size: r(42);
                color: $fc-base;
                line-height: 1;
                padding-top: r(20);
                padding-bottom: r(48);
                display: block;
            }
        }
        .swiper-pagination-bullet {
            width: r(15);
            height: r(15);
        }
        .swiper-pagination-bullet-active {
            background: $bg-red;
        }
        .swiper-pagination {
            bottom: r(43);
        }
    }
}

// 滑动查看更多
.slide-more {
    height: r(150);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: r(138);
    span {
        font-size: r(42);
        color: $fc-base;
    }
}

//底部fixed buttons
.fixed-btns {
    height: r(138);
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    z-index: 100000;
    box-sizing: border-box;
    border-top: 1px solid $border-gary;
    width: 100%;
    .item-left {
        display: flex;
        width: 42%;
        .item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            box-sizing: border-box;
            border-right: 1px solid $border-gary;
            color: $fc-gary;
            font-size: r(30);
            span {
                display: block;
                line-height: 1;
                padding-top: r(20);
            }
            &:last-child {
                border-right: 0;
            }
        }
    }
    .item-right {
        flex: 1;
        display: flex;
        .item {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            color: $fc-white;
            font-size: r(48);
        }
    }
}

// 商品具体详细信息
.product-infoBox-wrap {
    margin-top: r(30);
    padding-bottom: r(168);
    .tab-item {
        padding: r(48) 0;
    }
    .tit {
        display: flex;
        justify-content: center;
        align-items: center;
        height: r(36);
        margin-bottom: r(37);
        .tit-line {
            text-indent: -9999em;
            width: r(375);
            height: r(3);
            background-color: $border-gary;
        }
        .name {
            font-size: r(36);
            color: $fc-gary;
            margin-left: r(48);
            margin-right: r(48);
        }
    }
    .bd {
        box-sizing: border-box;
        .img {
            width: 100%;
            img {
                display: block;
                width: 100%;
            }
        }
    }
    .paramTable {
        border: r(2) solid $border-gary;
        li {
            height: r(108);
            display: flex;
            border-bottom: r(2) solid $border-gary;
            &:last-child {
                border-bottom: 0;
            }
            span {
                box-sizing: border-box;
                display: flex;
                align-items: center;
                font-size: r(36);
                color: $fc-gary;
                &.key {
                    width: 28%;
                    border-right: r(2) solid $border-gary;
                    text-indent: r(48);
                }
                &.val {
                    width: 72%;
                    text-indent: r(34);
                }
            }
        }
    }
    .hr {
        height: r(30);
        display: block;
        width: 100%;
    }
    .explain {
        padding-top: r(48);
    }
    .biref {
        padding-bottom: r(36);
        p {
            font-size: r(36);
            color: $fc-gary;
            line-height: r(50);
        }
    }
}

// 商品评价筛选
.product-filter {
    padding-top: r(144);
    .hd {
        height: r(138);
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: r(2) solid $border-gary;
    }
    .check {
        display: flex;
        align-items: center;
        .radio {
            width: r(48);
            height: r(48);
            display: block;
            border: r(4) solid $fc-gary;
            border-radius: 50%;
            appearance: none;
            &:checked {
                border-color: $border-red;
                background: url("../../dist/img/comment_check.png") no-repeat center center/r(31) r(22);
            }
        }
        .name {
            font-size: r(42);
            color: $fc-base;
            margin-left: r(15);
        }
    }
    .rating {
        span {
            font-size: r(42);
            color: $fc-red;
        }
    }
    .bd {
        display: flex;
        flex-wrap: wrap;
        margin-top: r(30);
    }
    .item {
        width: r(227);
        height: r(77);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: r(15);
        border: r(2) solid $bg-light-red;
        background-color: $bg-light-red;
        box-sizing: border-box;
        margin-right: r(30);
        margin-bottom: r(30);
        color: $fc-base;
        &:nth-child(4n) {
            margin-right: 0;
        }
        span {
            font-size: r(36);
        }
        &.cur {
            border-color: $border-red;
            background-color: $bg-white;
            color: $fc-red;
            position: relative;
            &:before {
                content: "";
                width: r(31);
                height: r(22);
                margin-right: r(15);
                @include bg("../../dist/img/comment_check.png")
            }
        }
    }
}

// 商品详情评价
.commentDetail-wrap {
    margin-top: r(30);
    padding-bottom: r(168);
    .comment-section {
        border-bottom: r(2) solid $border-gary;
        padding-bottom: r(30);
        &:last-child {
            border-bottom: 0;
        }
        .hd {
            display: flex;
            padding-top: r(28);
            .avatar {
                width: r(77);
                height: r(77);
                img {
                    width: 100%;
                    display: block;
                    border-radius: 50%;
                }
            }
            .info {
                display: flex;
                justify-content: space-between;
                flex: 1;
                .info-l {
                    display: flex;
                    flex-direction: column;
                    margin-left: r(18);
                    .name {
                        font-size: r(36);
                        line-height: r(50);
                        color: $fc-base;
                    }
                    .rating {
                        display: flex;
                        margin-top: r(15);
                        span {
                            margin-right: r(15);
                        }
                    }
                }
                .info-r {
                    display: flex;
                    align-items: center;
                    .time {
                        font-size: r(36);
                        color: $fc-gary;
                    }
                }
            }
        }
        .bd {
            margin-left: r(95);
            .comment {
                font-size: r(42);
                color: $fc-base;
                line-height: r(52);
                margin-top: r(52);
                margin-bottom: r(43);
                padding-right: r(25);
            }
            .img {
                margin-bottom: r(29);
                display: flex;
                align-items: center;
                overflow-x: auto;
                img {
                    width: r(162);
                    height: r(162);
                    margin-right: r(20);
                    flex-shrink: 0;
                }
            }
            .info {
                height: r(60);
                padding-bottom: r(40);
                font-size: r(36);
                color: $fc-gary;
                display: flex;
                align-items: center;
                .time {
                    margin-right: r(35);
                }
            }
            .reply {
                font-size: r(36);
                color: $fc-base;
                line-height: r(52);
                padding: r(28) r(25);
            }
        }
    }
}

//商品分类
.product-category-wrap {
    padding-top: r(174);
    padding-bottom: r(27);
    .single-wrap {
        .item-wrap {
            &:active {
                background-color: rgba(0, 0, 0, 0.1)!important;
            }
            &:last-child {
                .item {
                    border-bottom: 0;
                }
            }
            &.icon-arr-r {
                background: url("../../dist/img/item_arr_r.png") no-repeat right r(48) center/auto r(40);
            }
            .item {
                margin-left: r(48);
                height: r(138);
                display: flex;
                align-items: center;
                font-size: r(42);
                color: $fc-base;
                border-bottom: r(2) solid $border-gary;
            }
        }
    }
    .detail-wrap {
        margin-top: r(32);
        .more-section {
            padding: 0 r(48);
            border-bottom: r(2) solid $border-gary;
            .title {
                font-size: r(42);
                color: $fc-base;
                font-weight: normal;
                height: r(132);
                line-height: r(132);
            }
            .list {
                display: flex;
                flex-wrap: wrap;
                li {
                    width: 48%;
                    height: r(120);
                    display: flex;
                    align-items: center;
                    text-indent: r(32);
                    background-color: $bg-selItem-gary;
                    margin-right: 4%;
                    margin-bottom: r(24);
                    font-size: r(42);
                    color: $fc-base;
                    &:nth-child(2n) {
                        margin-right: 0;
                    }
                }
            }
            .moreBtn {
                font-size: r(36);
                color: $fc-gary;
                padding-top: r(24);
                padding-bottom: r(35);
                display: inline-block;
                float: right;
            }
        }
        .simple-section {
            @extend .single-wrap;
        }
    }
}

.hover-cart {
    position: fixed;
    right: r(48);
    bottom: r(225);
    @include bg('../../dist/img/hover_cart.png');
    width: r(120);
    height: r(120);
    border-radius: 50%;
    z-index: 9000;
}

// 高端定制
.dz-address {
    .hd {
        font-size: r(36);
        color: $fc-orange;
        height: r(90);
        line-height: r(90);
    }
    .bd-wrap {
        background: #fff url("../../dist/img/add_bar.png") no-repeat bottom/100% r(7);
    }
    .bd {
        padding-top: r(44);
        padding-bottom: r(44);
        &.icon-dz-arr-r {
            background: url("../../dist/img/dz_arr_r.png") no-repeat right center/r(23) r(40);
        }
    }
    .top {
        font-size: r(48);
        color: $fc-base;
        line-height: 1;
        padding-bottom: r(27);
        span:first-child {
            padding-left: r(66);
        }
    }
    .bot {
        font-size: r(42);
        line-height: r(52);
        color: $fc-base;
        display: flex;
        align-items: center;
        i {
            flex-shrink: 0;
        }
    }
}

// 定制需求
.dz-require {
    .title {
        font-size: r(42);
        color: $fc-base;
        font-weight: normal;
        padding-top: r(60);
        padding-bottom: r(30);
    }
    .sub-title {
        font-weight: normal;
        font-size: r(42);
        color: $fc-title-gary;
        line-height: 1;
        padding-top: r(20);
        padding-bottom: r(30);
    }
    .input-cell {
        padding: r(25) r(32);
        background-color: #fafafa;
        width: r(683);
        border-radius: r(15);
        margin-bottom: r(36);
        position: relative;
        input {
            background-color: transparent;
            appearance: none;
            width: 100%;
            font-size: r(42);
            color: $fc-gary;
        }
        .unit {
            font-size: r(42);
            color: $fc-base;
            position: absolute;
            right: r(-85);
            bottom: r(25);
        }
    }
    .textarea {
        padding: r(30);
        background-color: #fafafa;
        textarea {
            resize: none;
            appearance: none;
            height: r(240);
            width: 100%;
            border: none;
            background: transparent;
            font-size: r(42);
            color: $fc-gary;
        }
    }
    .selType {
        display: flex;
        flex-wrap: wrap;
        .item {
            width: r(206);
            height: r(86);
            position: relative;
            margin-right: r(40);
            margin-bottom: r(20);
            box-sizing: border-box;
            flex-shrink: 0;
            input {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                &:checked {
                    &+span {
                        color: $fc-red;
                        border-color: $border-red;
                    }
                }
            }
            span {
                display: block;
                width: 100%;
                height: 100%;
                line-height: r(86);
                text-align: center;
                border: 1px solid $border-gary-dark;
                border-radius: r(15);
                font-size: r(42);
                color: $fc-base;
            }
            b {
                position: absolute;
                width: r(78);
                height: r(45);
                top: r(-10);
                right: r(-18);
                font-size: r(30);
                color: $fc-white;
                background-color: $bg-red;
                border-radius: r(55);
                text-align: center;
                line-height: r(45);
                font-weight: normal;
                display: block;
            }
        }
    }
    .base-info {
        border-bottom: 1px solid #e6e6e6;
    }
    .dz-type {
        border-bottom: 1px solid #e6e6e6;
        .imgSel {
            display: flex;
            flex-wrap: wrap;
            margin-top: r(28);
            .item {
                flex-shrink: 0;
                position: relative;
                width: r(202);
                height: r(202);
                margin-right: r(42);
                img {
                    display: block;
                    width: 100%;
                }
                input {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    appearance: none;
                    opacity: 0;
                    z-index: 100;
                    &:checked {
                        &~.circle {
                            background: $bg-red url("../../dist/img/dz_check.png") no-repeat center center/r(24) r(19);
                            border-color: $border-red;
                        }
                    }
                }
                span {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    font-size: r(30);
                    color: $fc-white;
                    background: rgba(0, 0, 0, .4);
                    width: 100%;
                    height: r(48);
                    line-height: r(48);
                    text-indent: r(12);
                }
                .circle {
                    width: r(40);
                    height: r(40);
                    border: r(4) solid #ababab;
                    border-radius: 50%;
                    display: block;
                    position: absolute;
                    right: r(-20);
                    top: r(-10);
                    background-color: $bg-white;
                }
            }
        }
    }
    .dz-tecRequire {
        border-bottom: 1px solid #e6e6e6;
    }
    .dz-data {
        border-bottom: 1px solid #e6e6e6;
    }
    .dz-other {
        border-bottom: 1px solid #e6e6e6;
    }
    .dz-count {
        display: flex;
        justify-content: space-between;
        padding-bottom: r(120);
        padding-top: r(48);
        .title {
            padding-top: 0;
            padding-bottom: 0;
        }
    }
}

// 定制提交按钮
.dz-submit {
    height: r(138);
    background-color: $bg-red;
    color: $fc-white;
    &:active {
        opacity: .7;
    }
    h1 {
        font-size: r(48);
        font-weight: normal;
        text-align: center;
        height: 100%;
        line-height: r(138);
    }
}